import { ProFormDigit, ProFormInstance, ProFormSelect, ProFormSwitch } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd/lib';
import React, { useMemo, useRef } from 'react';
import { useModel } from 'umi';

type FormProps = {
  open: boolean;
  current: API.BroadcastIp | undefined;
  onCancel: () => void;
  onSubmit: (values: API.BroadcastIp) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, current, onCancel, onSubmit } = props;
  if (!open) {
    return null;
  }
  
  const formRef = useRef<ProFormInstance>();


  const { supplierOptions, } = useModel(
    'useGlobalModel',
    (model) => ({
      supplierOptions: model.supplierOptions,
    }),
  );

  const handleFormSubmit = async (record: API.BroadcastIp) => {
    var instanceIds = formRef.current?.getFieldValue('instances');
    if(instanceIds){
      record.instanceIds = instanceIds.split('\n').map((val) => Number(val));
    }
    else{
      record.instanceIds = undefined;
    }
    await onSubmit(record);
  }


  return (
    <DrawerForm<API.BroadcastIp>
      open={open}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}IP`}
      width={900}
      formRef={formRef}
      onFinish={handleFormSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={8}>
          <ProFormText
            name="ip"
            label="广播IP地址"
            rules={[{ required: true, message: '请输入IP地址' }]}
          />
        </Col>
        <Col span={4}>
          <ProFormSwitch
            name="status"
            label="状态"
            fieldProps={{
              defaultChecked: true,
            }}
            initialValue={true}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormText
            name="ipStart"
            label="起始可用IP"
            rules={[{ required: true, message: '请输入起始可用IP' }]}
          />
        </Col>
        <Col span={8}>
          <ProFormText
            name="ipEnd"
            label="最后可用IP"
            rules={[{ required: true, message: '请输入最后可用IP' }]}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormSelect
            name="supplierId"
            label="服务器供应商"
            placeholder="请选择服务器供应商"
            allowClear={true}
            options={supplierOptions}
            fieldProps={{
              showArrow: true,
              showSearch: true,
              listHeight:600,
            }}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="remark" label="备注" />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea 
            name="instances"
            label="允许使用实例ID列表 [一行一个]"
            fieldProps={{ rows: 25 }}
            initialValue={current?.instanceIds ? current.instanceIds.join('\n') : undefined}
          />
        </Col>
      </Row>

    </DrawerForm>
  );
};

export default Form;
